<template>
    <el-select v-model="sval" :disabled="disabled" :class="className" filterable :popper-class="popperClass" clearable
        placeholder="填写品种" :style="{ width }" @change="onChcange">
        <el-option v-for="dt in lists" :key="dt.code" :value="dt.code" :label="dt.meaning" />
    </el-select>
</template>
<script setup>
import { ref, onMounted, watch } from "vue"
import { getCropList } from '@/api/plant'
import { useUserStore } from '@/pinia/modules/user'

const userStore = useUserStore()

const props = defineProps({
    modelValue: '',
    width: {
        type: String,
        default: '100%'
    },
    params:{  // 查询条件
        type:Object,
        default:{}
    },
    className: '',
    popperClass: "",
    disabled: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['update:modelValue', 'change','changeName'])
const sval = ref('')
const lists = ref('')

onMounted(() => {
    // getTableData()
})

watch(() => props.params?.param1, (n, o) => {
    if(props.params?.param1){
        getTableData()
    }else{
        lists.value = []
    }
})

watch(() => props.modelValue, (n, o) => {
    sval.value = n
})

const getTableData = async (params) => {
    const pm = params || props.params
    const res = await getCropList({
        page: 1,
        limit: 1000000,
        ...pm
    })
    if (res.code == 0) {
        lists.value = res.data
        sval.value = props.modelValue ?props.modelValue: '' // 设置默认选项
    }
}

const onChcange = () => {
    emit('update:modelValue', sval.value)
    emit('change', sval.value)
    if (sval.value) {
        const item = lists.value.find((ele) => {
            return ele.code === sval.value
        })
        emit('changeName', item.meaning)
    }else{
        emit('changeName', '')
    }
}

defineExpose({ getTableData })

</script>

<style scoped lang="scss"></style>